<template> 
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1,'--btn-color':configInfo.btnColor}">
		<u-sticky customNavHeight="0" v-if="taskInfo.state != 3" >
			<view class="bg-danger light text-danger text-center text-sm p-sm">
				<m-icon name="information-line" :text="'该'+taskInfo.type_text+taskInfo.state_text"></m-icon>
			</view>
		</u-sticky>
		<view class="head-card rel p-t-md p-l-md p-r-md">
			<view class="section-bg radius-10" style="overflow: hidden;">
			<view class="p-md p-t-sm p-b-sm" :class="{'limit-vip' : taskInfo.limit_level > 1}">
				<view class="flex-between flex-warp-nowarp" style="align-items: flex-start;">
					<view class="text-md text-weight">
						{{ taskInfo.title }}
					</view>
					<!-- #ifdef H5 -->
					<m-icon name="alarm-warning-line" @click="pullUpShow = true"></m-icon>
					<!-- #endif -->
				</view>
				<view class="m-t-xs flex-start" v-if="taskInfo.type == 1">
					<text class="number text-lg" :style="{'color':configInfo.mainColor1}">{{taskInfo.unit_price}}</text>
					<text class="text-xs text-auxiliary m-l-xs">{{ configInfo.money_company }}</text>
					<view v-if="taskInfo.unit_integral > 0">
						<text class="text-sm number m-l-xs" :style="{color:configInfo.mainColor1}">+ {{taskInfo.unit_integral}}</text>
						<text class="text-xs m-l-xs text-auxiliary" v-if="configInfo.integral_company">{{configInfo.integral_company}}</text>
					</view>
				</view>	
				<view class="m-t-xs flex-between flex-center" v-if="taskInfo.type == 2">
					<view class="text-xs text-secondary flex-start">
						<m-icon name="map-pin-5-line" :text="taskInfo.city_name ? taskInfo.city_name : '全国' "></m-icon>
						<text class="m-l-sm text-warning">报名人数：{{taskInfo.join_num}}/{{taskInfo.ticket_num}}</text>
					</view>
					<view>
						<text class="number text-lg" :style="{'color':configInfo.mainColor1}">{{taskInfo.unit_salary}}</text>
						<text class="text-xs text-auxiliary m-l-xs">{{$t('task.offline-unit')}} / {{ taskInfo.salaryp_pany_text }}</text>
					</view>
				</view>
			<!-- 	<view class="m-t-xs text-warning" v-if="taskInfo.unit_integral > 0">
					<m-icon class="text-xs" name="coin-line" :text="$util.handleStr($t('task_detail.integral-tips'),taskInfo.unit_integral,(configInfo.integral_company ? configInfo.integral_company : $t('task.item.integral')))"></m-icon>
				</view> -->
				<view class="m-t-xs">
					<text class="badge light m-r-sm" v-if="taskInfo.taskcate">{{ taskInfo.taskcate.title }}</text>
					<text class="badge light badge-red" v-if="taskInfo.type == 1 && taskInfo.unit_integral > 0">{{taskInfo.limit_device_text}}</text>
				</view>
				
				<view class="m-t-md m-b-sm">
					<u-line dashed></u-line>
				</view>
				
				<view class="flex-start flex-align-items flex-warp-nowarp p-b-sm" v-if="taskInfo.type == 1">
					<cmd-progress type="line" :percent="taskInfo.task_speed ? taskInfo.task_speed : 0" :stroke-width="15" status="active" :stroke-color="configInfo.mainColor" :show-info="false" :width="20"></cmd-progress>
					<view class="text-xs m-l-sm text-secondary" style="white-space: nowrap;margin-left: 5px;" v-if="taskInfo.surplus_num > 0">
						{{$t('task_detail.surplus-num')}}：{{ taskInfo.surplus_num }}
					</view>
				</view>
				
				<view class="flex-between" v-if="taskInfo.type == 2">
					<view class="task-tags" v-if="taskInfo.type == 2 && taskInfo.tags">
						<text v-for="(item, index) in taskInfo.tag_arr" :key="index">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="limit-vip_barder p-md p-t-sm p-b-sm text-xs flex-between flex-align-items" v-if="taskInfo.limit_level > 1">
				<m-icon name="vip-diamond-line" text="会员专属任务"></m-icon>
				<view class="flex-start" v-if="taskInfo.end_time_timestamp > 0">
					<text>距离结束剩余：</text>
					<u-count-down
					    :time="taskInfo.end_time_timestamp"
					    format="DD:HH:mm:ss"
					    autoStart
					    millisecond
						@change="onChangeEndTime"
					>
					    <view class="time">
							<text class="time__item" v-if="endTimeData.days">{{ endTimeData.days }}&nbsp;天</text>
					        <text class="time__item">{{ endTimeData.hours>10?endTimeData.hours:endTimeData.hours}}&nbsp;时</text>
					        <text class="time__item">{{ endTimeData.minutes }}&nbsp;分</text>
					        <text class="time__item">{{ endTimeData.seconds }}&nbsp;秒</text>
					    </view>
					</u-count-down>
				</view>
			</view>
			</view>
		</view>
		
		<view class="task-author conter" @click="$util.go('pages/info?channel='+taskInfo.channel+'&channel_id='+taskInfo.channel_id,{path:'/merchant/',login:true})" v-if="masterInfo">
			<!-- <m-icon class="badge user" :class="{'admin' : taskInfo.channel == 1}" name="store-line" :text="taskInfo.channel == 1 ? $t('task.ditch-pingtai') : $t('task.ditch-yonghu')"></m-icon> -->
			<!-- <text class="badge user" :class="{'admin' : taskInfo.channel == 1}">{{ taskInfo.channel == 1 ? $t('task.ditch-pingtai') : $t('task.ditch-yonghu')}}</text> -->
			<view class="flex-start">
				<u-avatar :src="masterInfo.avatar" size="45"></u-avatar>
				<view class="task-author_info">
					<view class="task-author__username flex-start">
						<text>{{ taskInfo.channel == 1 ? masterInfo.nickname : masterInfo.username }}</text>
						<view class="flex-center" v-if="taskInfo.channel == 2">
							<user-auth-icon class="m-l-xs" type="vip" size="35rpx" v-if="masterInfo.level > 0"></user-auth-icon>
							<user-auth-icon class="m-l-xs" type="merchant" size="35rpx"></user-auth-icon>
						</view>
						<user-auth-icon class="m-l-xs" type="admin" size="35rpx" v-if="taskInfo.channel == 1"></user-auth-icon>
						<!-- <text class="badge m-l-sm" :class="[taskInfo.channel == 1 ? 'badge-admin' : 'badge-merchant']">{{taskInfo.channel_text}}</text> -->
					</view>
					<view class="task-author__data flex-start">
						<text class="text-secondary">{{$util.handleStr($t('task_detail.author-tak-num'),taskInfo.allCount)}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 平台提示 -->
		<view class="task-tips bg-warning light text-warning conter" v-if="configInfo.task_detail_tips">
			<view class="flex-start p-sm p-l-md p-r-md">
				<view><i-icon name="error-warning-line" size="30rpx" class="text-warning m-r-sm"></i-icon></view>
				<text style="flex:1">{{configInfo.task_detail_tips}}</text>
			</view>
		</view>
		
		<!-- 任务说明 -->
		<view class="task-desc conter">
			<view class="title-part flex-between flex-align-items p-b-sm" v-if="taskInfo.type == 1">
				<m-icon name="file-list-2-line" :text="$t('task_detail.desc-title')" class="item-icon"></m-icon>
			</view>
			<view class="title-part flex-between flex-align-items p-b-sm" v-if="taskInfo.type == 2">
				<m-icon name="file-list-2-line" text="职位描述" class="item-icon"></m-icon>
			</view>
			<view class="p-t-sm text-secondary">
				<text>{{ taskInfo.desc }}</text>
			</view>
			<view class="p-t-sm text-secondary" v-if="taskInfo.type == 2">
				<view>工作地点：{{taskInfo.work_add}}</view>
				<view class="m-t-xs">工作时间：{{taskInfo.work_time}}</view>
			</view>
		</view>
		
		<!-- 职位说明 -->
		<view class="p-sm section-bg conter" v-if="taskInfo.type == 2">
			<view class="title-part flex-between flex-align-items p-b-sm" v-if="taskInfo.type == 2">
				<m-icon name="account-circle-line" text="招聘人信息" class="item-icon"></m-icon>
			</view>
			<view class="p-t-sm text-secondary">
				<!-- <view>
					<u-alert type="error" description="报名成功后请主动联系招聘方"></u-alert>
				</view> -->
				<view>
					<view class="flex-start" v-if="taskInfo.work_mobile">
						<text>联系电话：</text>
						<view class="flex-start" v-if="recInfo" @click="$util.copyText(taskInfo.work_mobile)">
							<text >{{ taskInfo.work_mobile }}</text>
							<i-icon size="30rpx" color="#999" name="file-copy-2-line" class="m-l-sm"></i-icon>
						</view>
						<text class="text-warning" v-if="!recInfo">[报名后显示]</text>
					</view>
					<view class="m-t-xs flex-start" v-if="taskInfo.work_weixin">
						<text>联系微信：</text>
						<view class="flex-start" v-if="recInfo" @click="$util.copyText(taskInfo.work_weixin)">
							<text >{{ taskInfo.work_weixin }}</text>
							<i-icon size="30rpx" color="#999" name="file-copy-2-line" class="m-l-sm"></i-icon>
						</view>
						<text class="text-warning" v-if="!recInfo">[报名后显示]</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 悬赏步骤 -->
		<view class="task-step conter p-b-md" v-if="taskInfo.type == 1 && taskInfo.steps.length > 0">
			<view class="title-part flex-between flex-align-items p-b-sm">
				<m-icon name="sort-desc" :text="$t('task_detail.step-title')" class="item-icon"></m-icon>
			</view>
			<view class="task-step_steps">
				<view class="step-item flex-between" v-for="(item, index) in taskInfo.steps" :key="index">
					<view class="step-item_num">
						<text :style="{'background':configInfo.mainColor}">{{ index + 1}}</text>
					</view>
					<view class="step-item_content">
						<view class="step-item__title" v-if="item.fields">
							<text>{{item.fields.text}}</text>
						</view>
						<view class="step-item__textarea flex-between" v-if="item.type == 2 || item.type == 3">
							<view class="step-item___fieldcontent u-line-2">
								<text v-if="item.type == 2" v-show="recInfo.id">{{item.fields['copy']}}</text>
								<text v-if="item.type == 3" v-show="recInfo.id">{{item.fields['link']}}</text>
								<text v-show="!recInfo.id">*********</text>
							</view>
							<view>
								<m-icon name="file-copy-2-line" color="#555" size="26rpx" :text="$t('task_detail.step-copy-btn')" textColor="#555" textSize="26rpx" @click="copy(item.fields['copy'])" v-if="item.type == 2"></m-icon>
								<m-icon name="links-line" color="#555" size="26rpx" :text="$t('task_detail.step-open-btn')" textColor="#555" textSize="26rpx" @click="openUrl(item.fields['link'])" v-if="item.type == 3"></m-icon>
							</view>
						</view>
						<view class="step-item__input" v-if="item.type == 6 && recInfo.id">
							<input type="text" :placeholder="$t('task_detail.step-input-placeholder')" :id="item.sort" v-if="recInfo.state == 1 || recInfo.state == 3 &&  recInfo.is_repeat == 1" @input="changeSubInfo"/>
							<input type="text" :value="recInfo.sub_info[item.sort]['value']" v-if="recInfoShow && recInfo.sub_info[item.sort]" disabled >
						</view>
						<view class="step-item__upload flex-start" v-if="item.type == 4 || item.type == 5 || item.type == 7">
							<view class="step-item__upload_image" v-if="item.fields.img">
								<text class="step-item__upload__corner">{{labelText[item.type]}}</text>
								<image :src="item.fields.img" mode="widthFix" style="width: 100%;" @click="$util.previewImage(item.fields.img)"></image>
							</view>
							<view class="step-item__upload_down" v-if="item.type == 5">
								<u-button size="mini" :color="configInfo.mainColor" :style="{'color':configInfo.btbColor,'padding':'30rpx','box-shadow': '0 5px 10px 0 '+configInfo.mainColor+'30'}" :text="$t('task_detail.step-save-to-album-btn')" @click="downImg(item.fields['img'])"></u-button>
							</view>
							<view class="step-item__upload_previewimg" v-if="item.type == 7 && recInfoShow && recInfo.sub_info[item.sort]">
								<image :src="recInfo.sub_info[item.sort]['value']" mode="widthFix" style="width: 100%;" @click="$util.previewImage(recInfo.sub_info[item.sort]['value'])"></image>
							</view>
							<m-uploads
								:uploadNum="1"
								:modelNmae="item.sort"
								@delete="deleteConfirm($event)"
								@confirm="uploadConfirm($event)"
								v-if="item.type == 7 && recInfo.id && (recInfo.state == 1 || recInfo.state == 3 &&  recInfo.is_repeat == 1)"
							>
							</m-uploads>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 相关任务 -->
		<!-- <view class="related-task section-bg conter p-md p-t-sm p-b-sm">
			<view class="title-part flex-between flex-align-items p-b-sm" v-if="taskInfo.type == 1">
				<m-icon name="thumb-up-line" text="相关推荐"></m-icon>
			</view>
		</view> -->
		
		<!-- 按钮区域 -->
		<view class="task-operation" v-if="recInfo || taskInfo.state == 3 && (!userInfo || taskInfo.channel != 2 || userInfo && userInfo.uid != taskInfo.channel_id)">
			<view class="task-operation_countdown" v-if=" (taskInfo.type == 1 && recInfo.state > 0 && recInfo.state == 1 ||  taskInfo.type == 1 && recInfo.state == 3 &&recInfo.is_repeat == 1 && taskInfo.limit_sub_time > 0)">
				<text class="text-in-c-2">{{$t('task_detail.task-sub-surplus-time')}}</text>
				<u-count-down :time="subTime" format="HH:mm:ss" @finish="getTaskInfo"></u-count-down>
			</view>
			<view class="flex-between" style="flex-wrap: nowrap;">
				<view class="task-operation_moduls">
					<m-icon :class="favClass" :color="favIconColor" :name="favIcon" size="45rpx" @click="favTask"></m-icon>
				</view>
				<view class="task-operation_btn">
					<view v-if="taskInfo.type == 1">
						<m-button shape="circle" :text="$t('task_detail.task-receive-btn')" :loading="actionLoading" @submit="recTask" v-if="!recInfo"></m-button>
						<m-button shape="circle" :text="$t('task_detail.task-sub-btn')" :loading="actionLoading" @submit="subTask" v-if="recInfo && (recInfo.state == 1 || recInfo.state == 3 && recInfo.is_repeat == 1)"></m-button>
						<m-button shape="circle" :text="recInfo['state_desc']" :disabled="true" :loading="false" v-if="recInfo && (recInfo.state == 2 || recInfo.state == 3 && recInfo.is_repeat == 2 || recInfo.state == 4 || recInfo.state == 5)"></m-button>
					</view>
					<view v-if="taskInfo.type == 2">
						<m-button shape="circle" text="立即报名" :loading="actionLoading" @submit="recTask" v-if="!recInfo"></m-button>
						<m-button shape="circle" :text="recInfo['state_desc']" :disabled="true" :loading="false" v-if="recInfo"></m-button>
						<!-- <text class="btn btn-main" @click="confirmShow = true" v-if="!taskInfo.rec_info">{{$t('task_detail.task-receive-btn')}}</text> -->
						<!-- <m-button text="请及时联系招聘方" :disabled="true" @submit="recTask"v-if="recInfo && recInfo.state == 4"></m-button> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<!-- 统一弹出层 -->
		<m-modal
			:show="popupShow"
			@close="popupCloseAction"
			:closeBtnShow="popupIsClose"
		>
			<view class="p-t-md p-b-md text-center">
				<image :src="popupIcon[popupData.type]" mode="widthFix" style="width: 120rpx;" v-if="popupData.type">
				<view class="slot-content_item" v-if="popupData.title">
					<text class="text-sm text-bold">{{ popupData.title }}</text>
				</view>
				<view class="slot-content_item m-t-sm" v-if="popupData.desc">
					<text class="text-xs text-secondary">{{popupData.desc}}</text>
				</view>
			</view>
		</m-modal>

		<!-- 操作步骤提示框 -->
		<m-onlinesteptips
			:show="stepTipsShow"
			@closeModal="stepTipsShow = false"
			v-if="taskInfo.type == 1"
		>
		</m-onlinesteptips>	
		
		<!-- 更多弹出层 -->
		<u-action-sheet 
			:actions="pullUpList"
			@select="pullSelect" 
			:cancelText="$t('app.cancel-btn')" 
			@close="pullUpShow = false" 
			:show="pullUpShow">	
		</u-action-sheet>
		
		<u-action-sheet
			:show="bindPhoneShow"
			:round="10"
			:title="$t('task_detail.action-bind-phone-title')"
			@close="bindPhoneShow = false"
		>
			<view class="conter">
				<text class="text-danger">{{$t('task_detail.action-bind-phone-content')}}</text>
				<view style="width: 150px;margin: 0 auto;margin-top: 10px;">
					<u-button :style="{'color':configInfo.btnColor}" :color="configInfo.mainColor" :text="$t('task_detail.action-bind-phone-btn')" shape="circle"@click="$util.go('my/bind_phone')"></u-button>
				</view>
			</view>
		</u-action-sheet>
		
		<u-loading-page :loading="pageLoading" style="z-index: 99;"></u-loading-page>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop">
			<template v-slot:items>
				<view class="side-tools_item" @click="$util.go('my/my_receive',{login:true})">
					<m-icon name="flag-line" size="38rpx"></m-icon>
				</view>
				<view class="side-tools_item cancell-btn" @click="cancellTask(recInfo.id)" v-if="recInfo && (recInfo.state == 1 || recInfo.state == 3 && recInfo.is_repeat == 1)">
					<text class="text-sm">取消</text>
				</view>
				
			</template>
		</side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import AD from "../../utils/ad.js"
	export default {
		data() {
			return {
				taskId:'',
				stepTipsShow:false,
				taskInfo:'',
				recInfo:false,
				subInfo:{},
				recInfoShow:false,
				pageLoading:true,
				subTime:'', //提交倒计时
				cacheKey:'task_detail_',
				actionLoading:false,
				// confirmShow:false,
				// auditShow:false,
				pullUpShow:false,
				pullUpList: [{
					id:1,
					name:this.$t('task_detail.more-action-1'),
				},{
					id:2,
					name:this.$t('task_detail.more-action-2'),
				}],
				labelText:{
					4:this.$t('task_detail.img-label-1'),
					5:this.$t('task_detail.img-label-2'),
					7:this.$t('task_detail.img-label-3'),
				},
				bindPhoneShow:false,
				endTimeData:{},
				favClass:'',
				favIcon:'star-smile-line',
				favIconColor:'#333',
				// stateModal:true,
				popupShow:false,
				popupIsClose:true, // 允许关闭
				popupData:{
					type:1, // 类型
					title:'', // 标题
					desc:'' // 描述
				},
				popupIcon:{
					1:'/static/images/icon-ytg.png', // 正确
					2:'/static/images/icon-wtg.png', // 错误	
					3:'/static/images/icon-ytg.png', // 提示
				} ,
				recModelShow:false,
				masterInfo:false,
				scrollTop:0,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),

		async onLoad(option) {
			if(!option.id){
				this.$util.showToast(this.$t('app.error-1'));
				return;
			}
			this.taskId = option.id;
			this.cacheKey = this.cacheKey+this.taskId;
			let taskInfo = this.$util.getCache(this.cacheKey, true) || '';
			if(taskInfo){
				this.taskInfo = taskInfo;
				this.pageLoading = false;
			}
			let rulePostId = this.configInfo.task_rule_id
			if(!rulePostId){
				this.pullUpList.splice(1, 1)
			}
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		// 页面显示
		async onShow(){
			// 获取任务详情
			await this.getTaskInfo(true)
		},
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onNavigationBarButtonTap(){
			this.pullUpShow = true;
		},
		
		methods: {

			onChangeEndTime(e){
				this.endTimeData = e
			},
			
			pullSelect(res){
				if(res.id == 1){
					this.$util.go('workorder/workorder_add?type=2&task_id='+this.taskId,{'login':true})
				}
				if(res.id == 2){
					this.$util.go('article/article_detail?id='+this.configInfo.task_rule_id)
				}
			},
			
			/** 获取任务数据 **/
			async getTaskInfo(popOpen = false){
				var res = await this.$api.task.getTaskInfo({'id':this.taskId});
				if(res.code == 200 && res.data){
					this.taskInfo = res.data
					this.masterInfo = res.data.master
					// 缓存数据
					this.$util.setCache(this.cacheKey, res.data, 600, true)
					// 成功获取数据，取消加载动画
					this.pageLoading = false
					// console.log(res.data.rec_info)
					this.recInfo = false
					if(res.data.rec_info){
						this.recInfo = res.data.rec_info
						if(this.recInfo.state == 2 || this.recInfo.state == 3 && this.recInfo.is_repeat == 2 || this.recInfo.state == 4 || this.recInfo.state == 5){
							this.recInfoShow = true
						}
					}
					// 弹窗
					if(popOpen)this.popUp()
				}
				this.favClass = ''
				if(this.taskInfo.is_fav){
					this.favIconColor = this.configInfo.mainColor
					this.favIcon = 'star-smile-fill'
				}else{
					this.favIconColor = '#333'
					this.favIcon = 'star-smile-line'
				}
				
				if(this.recInfo && (this.recInfo.state == 1 || this.recInfo.state == 3 && this.recInfo.is_repeat == 1)){
					this.ationSubTime();
				}
				
				// 超时未提交
				if(res.code == 2001){
					// this.$util.showToast(res.msg)
					this.getTaskInfo();
				}
			},
			
			/**
			 * 取消抢单
			 */
			async cancellTask(id){
				const res = await this.$api.task.cancellTask({id:id});
				if(res.code == 200){
					this.$util.showToast(res.msg);
					this.getTaskInfo()
				}
			},
			
			popUp(){
				// // 任务待审核
				// if(this.taskInfo.state == 2){
				// 	this.popupData = {
				// 		type:	2,
				// 		title: this.$t('task_detail.wiat-audit-title'),
				// 		desc: this.$t('task_detail.wiat-audit-tips')
				// 	}
				// 	this.popupIsClose = false
				// 	this.popupShow = true
				// 	return;
				// }
				// // 任务审核未通过
				// if(this.taskInfo.state == 5){
				// 	this.popupData = {
				// 		type:	2,
				// 		title: '任务审核未通过',
				// 		desc: this.$t('task_detail.wiat-no-audit-tips'),
				// 	}
				// 	this.popupIsClose = false
				// 	this.popupShow = true
				// 	return;
				// }
				// 任务已结束
				
				// 其他状态异常
				// if(this.taskInfo.state != 3){
				// 	this.popupData = {
				// 		type:2,
				// 		title: '任务状态异常',
				// 		desc: this.taskInfo.state_text
				// 	}
				// 	this.popupIsClose = false
				// 	this.popupShow = true
				// 	return;
				// }
				if(this.recInfo && this.recInfo.state == 3){
					this.popupData = {
						type: 2,
						title: '审核未通过',
						desc: this.recInfo.audit_desc
					}
					this.popupIsClose = true
					this.popupShow = true
					return;
				};
				
				if(!uni.getStorageSync('task_step_tips')){
					this.stepTipsShow = true;
					return;
				}
			},
			
			// 领取任务
			recTask(){
				// APP观看广告
				// #ifdef APP-PLUS
					if(this.configInfo.jlsp_adpid){
						// 广告位ID存在且APP状态下使用激励视频广告
						this.showVideoAd();
					}else{
						this.submitTask();
					}
				// #endif
				
				// #ifdef MP-WEIXIN
					if(this.configInfo.miniapp_video_adid){
						// 广告位ID存在且APP状态下使用激励视频广告
						this.showVideoAd();
					}else{
						this.submitTask();
					}
				// #endif
				
				// #ifdef H5
				this.submitTask();
				//#endif
			},
			
			// 显示广告
			showVideoAd(){
				
				/** 完成进度 **/
				
				AD.show({
					adpid: this.configInfo.jlsp_adpid, // APP激励视频ID
					adType: "RewardedVideo"
				//singleton: false // 设置此参数后，每次调用 show 方法将重新创建广告实例，预载将失效，如果广告回调每次要透传用户信息需要设置 false
				},(res) => {
				    // 用户点击了【关闭广告】按钮
				    if (res && res.isEnded) {
				        // 正常播放结束
				        this.submitTask();
				    } else {
						uni.showToast({title:this.$t('task_detail.ad-error-1'),icon:"none"});
				    }
				    // 在此处理服务器回调逻辑
				}, (err) => {
				    // 广告加载错误
					uni.showToast({title:this.$t('task_detail.ad-error-2'),icon:"none"});
					// alert('广告加载错误');
					this.submitTask();
				});	
			},

			/**
			 * 领取任务
			 */
			async submitTask(){
				this.actionLoading = true
				this.$util.showLoading(this.$t('task_detail.receive-loading'))
				var res = await this.$api.task.recTask(this.taskId)
				if(res.code == 200){
					await this.getTaskInfo() // 更新一下任务数据
					if(this.taskInfo.type == 1){
						uni.showToast({title:res.msg,icon:"success"})
						this.ationSubTime(true);
					}
					if(this.taskInfo.type == 2){
						this.popupData = {
							type:1,
							title:'报名成功',
							desc:'请等待招聘方审核录取，录取通过后将会以站内信的方式通知您'
						}
						this.popupIsClose = true
						this.popupShow = true
					}
				}
				if(res.code == 2012){
					this.bindPhoneShow = true;
				}
				if(res.code == 30007){
					setTimeout(() => {
						uni.navigateTo({
							url:"/pages/my/my_info"
						});
					}, 1000)
				}
				this.actionLoading = false
			},
			
			// 计算提交倒计时
			ationSubTime(rec = false){
				if(rec){
					this.subTime = this.taskInfo.limit_sub_time * 60 * 1000;
					// console.log(this.subTime);
				}else{
					var endSubTime = this.recInfo.limitsub_time
					var timestamp = Math.round(new Date() / 1000);
					this.subTime = (endSubTime - timestamp) * 1000;
				}
			},
			
			// 倒计时结束
			subTimeFinish(){
				this.getTaskInfo();
			},
			
			// 提交任务
			async subTask(e){
				this.actionLoading = true
				let data = this.subInfo
				data['id'] = this.recInfo.id
				let res = await this.$api.task.subTask(data)
				if(res.code == 200){
					uni.showToast({title:res.msg,icon:"success"});
				}
				if(res.code == 2003){
					this.bindPhoneShow = true;
				}
				await this.getTaskInfo()
				this.actionLoading = false
			},
			
			// 查看联系方式
			// async getMobile(){
			// 	uni.showLoading({title:this.$t('app.waiting')});
			// 	var res = await Task.getMobile(this.taskId);
			// 	if(res.code == 200){
			// 		uni.setClipboardData({
			// 			data: res.data.mobile,
			// 			success: function () {
			// 				uni.showToast({title:this.$t('task_detail.copy-success'),icon:"success"});
			// 			}
			// 		});
			// 	}else{
			// 		uni.showToast({title:res.msg,icon:"none"});
			// 		if(res.code = 30008){
			// 			// 发布者未设置联系方式
			// 		}
			// 	}
			// },
			
			// 复制内容
			copy(nr){
				if(!this.recInfo){
					this.$util.showToast(this.$t('task_detail.no-receive'));
					return false;
				}
				this.$util.copyText(nr);
			},
			
			// 保存图片
			downImg(url){
				if(!this.recInfo){
					this.$util.showToast(this.$t('task_detail.no-receive'));
					return false;
				}
				this.$util.saveImageToPhoto(url);
			},
			
			// 打开链接
			openUrl(url){
				if(!this.recInfo){
					this.$util.showToast(this.$t('task_detail.no-receive'));
					return false;
				}
				this.$util.openUrl(url)
			},
			
			// 上传图片
			uploadConfirm(e){
				this.subInfo['rec'+e.modelName+'image'] = e.urls[0];
				// console.log(e)
			},
			
			// 删除图片
			deleteConfirm(e){
				this.subInfo['rec'+e.modelName+'image'] = '';
			},
			
			//
			changeSubInfo(e){
				// console.log(e.target.id);
				this.subInfo['rec'+e.target.id+'text'] = e.target.value;
			},
		
			// 收藏任务
			async favTask(){
				this.favIcon = 'loader-5-line'
				this.favClass = 'rotation'
				let data = {
					id : this.taskId
				}
				let res = await this.$api.task.favTask(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getTaskInfo()
					})
				}
			},
			
			popupCloseAction(){
				if(this.popupIsClose){
					this.popupShow = false
				}
			}
		}
	}
</script>
	
<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
    .status_bar{
        height: var(--status-bar-height);
        width: 100%;
    }
	// .default-title .title{
	// 	color: var(--maincolor2);
	// }
	.head-card.top{
		
	}
	.head-card{
		// background-color: #fff;
		overflow: hidden;
		// // #ifdef APP-PLUS
		// 	margin-top: 44px;
		// //#endif
		.limit-vip{
			border: 2px solid #282828;
			border-bottom:none;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			&_barder{
				color: #eedba3;
				// background-color: var(--theme-danger-dark);
				background-color: #282828;
				background: linear-gradient(20deg,#282828,#434343);
			}
		}
	}
	.task-author{
		background-color: #fff;
		padding: 10px 30rpx;
		overflow: hidden;
		&_info{
			margin-left: 30rpx;
		}
		&__data{
			margin-top: 10rpx;
		}
		// .badge{
		// 	position: absolute;
		// 	right: 0;
		// 	top:0;
		// 	border-bottom-left-radius: 5px;
		// 	border-top-left-radius: 0;
		// }
		// .badge.user{
		// 	color: #fff;
		// 	background-color: var(--theme-danger-dark);
		// }
		// .badge.admin{
		// 	color: #eedba3;
		// 	background-color: #333;
		// }
		// .badge-corner{
		// 	background: $maincolor-2;
		// 	color: #fff;
		// }
		// .badge-corner.on{
		// 	background-color: $auxcolor-4;
		// }
	}
	
	.task-desc{
		background-color: #fff;
		padding: 10px 30rpx;
		&_content{
			
			
		}
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
	.task-step{
		background-color: #fff;
		padding: 10px 30rpx;
	}
	.step-item{
		flex-wrap: nowrap;
		align-items: flex-start;
		position: relative;
		padding-bottom: 50rpx;
		.flex-between{
			align-items: flex-start;
			flex-wrap: nowrap;
		}
		&_num{
			// margin-right: 5px;
			text{
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				color: var(--mainbackcolor);
				background-color: var(--main-color-1);
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $contentSize;
				z-index: 2;
			}
		}
		&_content{
			margin-left: 30rpx;
			width: 100%;
		}
		&__title{
			font-size: $titleSize;
		}
		&__textarea{
			color: $incolor-2;
			margin-top: 20rpx;
			padding: 10px 30rpx;
			background-color: $incolor-4;
			// width: 80%;
			// margin-top: 20rpx;
			// overflow: hidden;
		}
		&___fieldcontent{
			width:400rpx;
		}
		
		&__input{
			margin-top: 15rpx;
			border-radius: 5px;
			background-color: #f4f5f7;
			input{
				padding: 10px;
				font-size: $contentSize;
			}
		}
		
		&__upload{
			position: relative;
			align-items: flex-end;
			margin-top: 20rpx;
		}
		&__upload_image{
			width: 250rpx;
			max-height: 150px;
			overflow: hidden;
			margin-right: 30rpx;
			position: relative;
			border-radius: 10px;
			/deep/ uni-image{
				border-radius: 10px;
			}
		}
		&__upload__corner{
			text-align: center;
			padding: 1px 5px;
			position: absolute;
			right: 0;
			top: 0;
			color: $incolor-1;
			border-bottom-left-radius: 10px;
			z-index: 2;
			background-color: var(--theme-warning-dark);
			font-size: 25rpx;
		}
		&__upload_down{
			position: absolute;
			left: 280rpx;
			bottom: calc((100% - 15px) / 2);
			.btn{
				// background: #000!important;
			}
		}
		&__upload_previewimg{
			width: 170rpx;
			max-height: 170rpx;
			overflow: hidden;
		}
	}
	.step-item:first-child{
		margin-top: 30rpx;
	}
	.step-item:after{
		position: absolute;
		content: '';
		left: 20rpx;
		width: 1px;
		height: 100%;
		background-color: var(--theme-line-four);
		top: 0;
		z-index: 1;
	}
	.step-item:last-child{
		padding-bottom: 0;
	}
	.step-item:last-child:after{
		display: none;
	}
	.task-operation{
		// background-color:rgba(255,255,255,.8);b
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 10px 30rpx;
		&_moduls{
			// width: 100%;
			margin-right: 30rpx;
		}
		&_btn{
			width: 100%;
		}
		&_btn.disabled{
			
		}
		&_countdown{
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $contentSize;
			position: relative;
			top: -5px;
		}
		
		// 组件样式
		/deep/ .u-count-down{
			margin: 0 5px;
			color: #000;
			&__text{
				color: $auxcolor-3;
				font-size: $contentSize;
				letter-spacing:1rpx
			}
		}
	}

	.m-steps{
		border-radius: 10px;
		overflow: hidden;
		background-color: #fff;
	}
	
	// .m-steps{
	// 	margin-top: 15px;
	// 	background-color: #fff;
	// 	border-radius: 10px;
	// 	margin: 15px 30rpx;
	// 	position: relative;
	// 	z-index: 3;
	// }
	
	.m-alert-tips{
		margin: 10px 30rpx!important;
	}
	
	.m-signup{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		padding: 10px 30rpx;
		.m-favs{
			width: 50px;
		}
		.btn{
			// margin: 10px 30rpx;
			width: 100%;
			background: linear-gradient(90deg, #F2BC35 , #FF9A18);
		}
		.e-btn{
			background: $linear-main;
			margin: 15px 30rpx;
			border-radius: 25px;
			text-align: center;
			padding: 10px;
		}
	}
	.m-confirm{
		.e-title{
			text-align: center;
			padding: 10px 0;
			font-size: 32rpx;
			
		}
		.e-conter{
			padding: 0 30rpx;
			font-size: 30rpx;
			color: $incolor-1;
		}
		.btn{
			margin: 10px 30rpx;
			background: linear-gradient(90deg, #F2BC35 , #FF9A18);
		}
		.item{
			margin: 6px 0;
		}

	}
	// .task-tips{
	// 	border: 1px solid var(--theme-warning-disabled);
	// 	color: var(--theme-warning);
	// 	background-color: var(--theme-warning-light);
	// }
	.edgeInsetBottom {
		height: 100rpx!important
	}
	.task-tags{
		text{
			color: var(--theme-text-secondary);
			background-color: var(--theme-line-four);
			font-size: 20rpx!important;
			padding: 5rpx 10rpx;
			margin-right: 15rpx;
			border-radius: 5px;
		}
	}
	/deep/ .cancell-btn{
		color: #fff!important;
		background-color: #00000080!important;
	}
	.item-icon{
		position: relative;
	}
	.item-icon:after{
		position: absolute;
		content: '';
		width: 25rpx;
		height: 25rpx;
		border-radius: 100%;
		background-color: #ffd42680;
		// right: 0rpx;
		bottom: 0rpx;
		z-index: -1;
		left: 8rpx;
	}
</style>
